
//定义图片数组
var imgs= ["imgs/img0.jpg","imgs/img1.jpg","imgs/img2.jpg","imgs/img3.jpg","imgs/img4.jpg"];
//默认图片索引
var index = 0;
//定时函数
var lb;



window.onload = function() {
          //获取小块
     var itemts =  document.querySelectorAll(".item");

    //每隔一定时间间隔需要切换图片
    lb = setInterval(change,2000);


    //点击小点切换
    for(let i = 0; i < itemts.length; i++){
        bind(i);
    }


    //定义函数切换图片
    function change(){
        //下一张图片
        index++;

        //判断图片是否越界
        if(index > imgs.length-1){
            index = 0;
        }

        //获得图片容器
      var pic =   document.querySelector("#img-pic");
      pic.src=imgs[index];

      //设置下方小块

     //遍历所有小块
     for(let i = 0; i < itemts.length; i++){
        //判断对应图片显示的小块更改颜色
        if(i == index){
            itemts[i].style.backgroundColor ="aquamarine";//颜色
              itemts[i].innerHTML = "图片"+ (i+1);//文字

        }else{
            //不对应恢复原状
            itemts[i].style.backgroundColor ="pink";
            itemts[i].innerHTML =  i+1;
        }

        
     }
        

    }

    //小点切换函数
    function bind(id){
        itemts[id].onclick = function(){
            //点击某个小点切换到某个图片 自身样式发生改变
            index = id; //切换图片的索引=点击小块的索引
            index --;//调用切换函数会+1
            change();//自动切换的函数

            //先让定时函数清除
            clearInterval(lb); //

            //两秒以后再循环调用
             lb = setInterval(change,2000);


        }
    }


}

